<template>
    <div class="search-wrapper">
        <van-search 
            v-model="value" 
            shape="round" 
            :show-action="showicon" 
            :placeholder="placeholder" 
            input-align="left"
            @search="onSearch"
            @input="onInput"
            @click="onClickInput"
        >
            <template #action v-if="showicon">
                <div class="filter-icon-wrapper" @click="openPopup">
                    <van-icon name="filter-o" size="24" color="#333" />
                    <!-- <span class="filter-dot"></span> -->
                </div>
            </template>
        </van-search>
    </div>
</template>
<script>
// import VPopup from './vPopup.vue'
export default {
    name: 'vsearch',
    components:{
// VPopup
    },
    props: {
        placeholder: {
            type: String,
            default: '请输入任务编号'
        },
        showicon: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            value: '',
            showRight: false,
        }
    },
    methods: {
        onSearch(v) {
            this.$emit('search', v)
        },
        onInput(v) {
            this.$emit('input', v)
        },
        onClickInput(v){
            this.$emit('ClickInput',v)
        },
        openPopup() {
            this.$emit('openpopup', true)
        }
    }
}
</script>

<style scoped>
.search-wrapper {
    position: relative;
}

.filter-icon-wrapper {
    position: relative;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: #ff4444;
    border-radius: 50%;
    border: 1px solid #fff;
}
</style>